<template>
  <div id="myTable">
    <div class="operation">
      <div class="left-operation-content">
        <el-input v-if="needSearch" v-model="searchKeys" placeholder="请输入搜索内容..." class="input-with-select" :suffix-icon="Search" @keyup.enter="getTableData()">
          <!-- <template #append>
            <el-button :icon="Search" @click="getTableData()" />
          </template> -->
        </el-input>
        <template v-for="(item, index) in headerOperation">
          <el-button v-if="item.inLeft" :key="index" :icon="item.icon" :title="item.tip" :disabled="item.disabled" :type="item.type" @click="item.handleClick">
            {{ item.name }}
          </el-button>
        </template>
      </div>
      <div class="right-operation-content">
        <template v-for="(item, index) in headerOperation">
          <el-button v-if="!item.inLeft" :key="index" :icon="item.icon" :disabled="(item.name === '删除' && delDisabled) || item.disabled" :type="item.type" @click="item.handleClick">
            {{ item.name }}
          </el-button>
        </template>
        <el-button :icon="RefreshRight" @click="getTableData">刷新</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      ref="refTable"
      :max-height="tableHeight"
      @select="select"
      :show-header="showheader"
      @select-all="selectAll"
      @row-click="handleClick"
      :row-key="keyName"
      :header-cell-class-name="cellClass"
      v-loading="load"
      show-overflow-tooltip
      stripe
      element-loading-text="Loading..."
      element-loading-background="rgba(122, 122, 122, 0.1)"
    >
      <template #empty>
        <div class="table-not-data">
          <img src="../../assets/images/table-notdata.svg" alt="" />
          <span>暂无数据</span>
        </div>
      </template>
      <template v-if="checkBox">
        <!-- 是否开启复选 -->
        <el-table-column type="selection" :selectable="checkSelectable" align="right" width="34"> </el-table-column>
      </template>
      <template v-if="radioBox">
        <el-table-column width="34" align="right">
          <template #default="scope">
            <div class="parerent">
              <el-radio :model-value="data.tableRadio" :value="JSON.stringify(scope.row)" @click="getTemplateRow(scope.row)"></el-radio>
            </div>
          </template>
        </el-table-column>
      </template>
      <!-- <el-table-column v-if="index" type="index" width="80" label="序号">
        <template #default="scope">
          {{ data.initTableParams.page * data.initTableParams.size + scope.$index + 1 }}
        </template>
      </el-table-column> -->
      <template v-for="(item, index) in tHead">
        <!-- 无需自定义的列 -->
        <el-table-column v-if="!item.isCustom" :key="index" :label="item.label" :type="item.type ? item.type : ''" :prop="item.prop ? item.prop : ''" :width="item.width" show-overflow-tooltip :sortable="item.sortable ? item.sortable : false"> </el-table-column>
        <slot v-else :name="item.slotName ? item.slotName : ''"> </slot>
      </template>
    </el-table>
    <div :class="total > 0 ? 'paginationWrap' : 'paginationWrap not-data-border'" class="flex jce" style="padding-right: 20px !important">
      <el-pagination class="justify-center" background :page-size="size" :page-count="maxPage ? maxPage : 1" :pager-count="5" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { Search, RefreshRight, Delete, Plus } from '@element-plus/icons-vue'
import { ref, reactive, computed, onMounted } from 'vue'
import { useTreeStore } from '~/utils/pinia/tree.js'
import { eventBus } from '~/utils/common/eventBus.js'
const treeStore = useTreeStore()
const load = ref(false)
const delDisabled = ref(true)
const searchKeys = ref('')
const props = defineProps({
  // 是否需要搜索框
  needSearch: {
    type: Boolean,
    default: false
  },
  // 是否显示序号
  index: {
    type: Boolean,
    default: true
  },
  // 是否开启表格复选框
  checkBox: {
    type: Boolean,
    default: false
  },
  // 是否开启表格单选
  radioBox: {
    type: Boolean,
    default: false
  },
  showheader: {
    type: Boolean,
    default: true
  },
  // 表格顶部操作按钮
  headerOperation: {
    type: Array,
    default: []
  },
  // 表格头
  tHead: {
    type: Array,
    default: () => {
      return [
        {
          label: '名称',
          prop: 'name',
          isCustom: false, // 控制列是否自定义
          slotName: 'model', // 如果要自定义列则需要该字段，否则可不写
          width: 200
        }
      ]
    }
  },
  // 表格数据
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 表格最大高度
  tableHeight: {
    type: String,
    default: '600'
  },
  keyName: {
    type: String,
    default: 'id'
  },
  checkSelectable: {
    type: Function,
    default: row => {
      return true
    }
  },
  // 当前页展示的数据条数
  size: {
    type: Number,
    default: 10
  },
  // 数据总条数
  total: {
    type: Number,
    default: null
  },
  // total总数最大多少条数据
  totalLimit: {
    type: Number,
    default: 10000
  }
})
const maxPage = computed(() => {
  return props.total > props.totalLimit ? Math.ceil(props.totalLimit / props.size) : Math.ceil(props.total / props.size)
})
const data = reactive({
  tableRadio: '{}',
  initTableParams: {
    page: 1,
    size: 10
  },
  tHead: []
})
onMounted(() => {
  getTableData()
})
const $emit = defineEmits(['changeRadioData', 'chooseData', 'getTableData'])
// 获取单选框数据
const getTemplateRow = row => {
  let row1 = data.tableRadio
  let row2 = JSON.stringify(row)
  if (row1 === row2) {
    data.tableRadio = '{}'
    delDisabled.value = true
    $emit('changeRadioData', {})
  } else {
    data.tableRadio = JSON.stringify(row)
    delDisabled.value = false
    $emit('changeRadioData', row)
  }
}
// // 复选框是否禁用
// const checkSelectable = (row) => {
//   // 返回true为不禁用 false为禁用
//   return true;
// };
const selectAll = selection => {
  delDisabled.value = selection.length != 0 ? false : true
  $emit('chooseData', selection)
}
const select = (selection, row) => {
  delDisabled.value = selection.length != 0 ? false : true
  $emit('chooseData', selection)
}
const loading = () => {
  load.value = true
}
const finish = () => {
  load.value = false
  delDisabled.value = true
}
// 点击某一行触发的事件
const handleClick = (row, column, event) => {}
// 表头单元格的 className 的回调方法
const cellClass = () => {
  return 'Table'
}
const handleCurrentChange = page => {
  data.initTableParams.page = page
  getTableData()
}
const getTableData = params => {
  $emit('getTableData', data.initTableParams, searchKeys.value, params)
}
const initTablePage = () => {
  data.initTableParams.page = 1
}
defineExpose({ getTableData, finish, loading, initTablePage })
</script>

<style lang="scss" scoped>
.operation {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  padding: 16px 16px 10px 16px;
}
// #myTable {
//   :deep(.el-table th.el-table__cell){
//     height: 54px;
//     font-size: 14px;
//     color: #ffffff;
//     background: #7f7685;
//   }
//   :deep(.el-table--enable-row-transition .el-table__body td.el-table__cell) {
//     height: 54px;
//   }
//   :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
//     background-color: #7f7685;
//     border-color: #7f7685;
//   }
//   :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
//     background-color: #fff;
//     border-color: #fff;
//   }
//   :deep(.el-checkbox__input .el-checkbox__inner):hover {
//     border-color: #7f7685;
//   }
//   .paginationWrap {
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     margin-top: 20px;
//     .total {
//       margin-right: 15px;
//       font-size: 14px;
//       color: #9b9b9b;
//     }
//     :deep(.el-pagination.is-background .el-pager li.is-active) {
//       color: #671f68;
//       border: 1px solid #671f68;
//       background: #fff;
//       font-weight: 400;
//     }
//     :deep(.el-pagination.is-background .btn-prev),:deep(.el-pagination.is-background .btn-next),:deep(.el-pagination.is-background .el-pager li) {
//       border: 1px solid #b9b9b9;
//       background: #fff;
//       color: #9b9b9b;
//     }
//     :deep(.el-pagination.is-background .btn-prev):hover,:deep(.el-pagination.is-background .btn-next):hover,:deep(.el-pagination.is-background .el-pager li):hover {
//       border: 1px solid #671f68;
//     }
//   }
// }
.paginationWrap {
  padding-top: 15px;
}
.table-not-data {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 350px;
  span {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.25);
    line-height: 30px;
  }
}
.not-data-border {
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
</style>
